<template>
  <div>
    <Spin :spinning="loading" tip="Loading...">
      <div style="padding-top: 1rem;"></div>
      <!-- table -->
      <FormPanel ref="formPanel" :list="formList" :cols="1" :formType="'add'" labelWidth="100" :isSubmitBtn="false" @formChange="formChangeHandle" />
      <BaseDialog :visible.sync="visibleDrawer" :title="'VIN查询'" width="850px" destroyOnClose :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
        <VinVehicle @close="closeAdd" @save="save"></VinVehicle>
      </BaseDialog>
      <BaseDialog :visible.sync="visibleAdd" :title="'配件选择'" width="850px" destroyOnClose :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
        <PeiJianSelect @close="closePart" @save="savePart"></PeiJianSelect>
      </BaseDialog>
      <div style="padding-top: 1rem;"></div>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <multiuse-button type="primary" :click="saveDialog.bind()">保 存</multiuse-button>
        <multiuse-button @click="closeDialog">关 闭</multiuse-button>
      </div>
    </Spin>
  </div>
</template>
<script>
import { getListByPage, newSave, piliangqiyong, piliangtingyong, excelExport, editSave,getTjdetail } from '@/api/claim/factory/SpecialCarPartTypeWarrantyMaintainOil';
import {  getPart } from '@/api/dictionary/index';
import VinVehicle from '@/pages/claimDemage/tools/VinVehicle.vue';
import PeiJianSelect from '@/pages/claimDemage/tools/vehicle.vue';
export default {
  props: ['type', 'rowData'],
  components: {
    VinVehicle,
    PeiJianSelect
  },
  data() {
    return {
      visible: false,
      loading: false,
      visibleDrawer: false,
      visibleAdd: false,
      fetchParams: {}, //ipa 接口
      selectedRows: [], //选中经销商
      formList: this.createFormList1(),
      saveData: null,
      modelName:'',
      ptStatus:'',
      ownerCode:'',
      ownerParCode:'',
      appId:'',
      isDeleted: '',
      createdBy:'',
      visibleAdd: false,
      part: {}
    };
  },
  created() {},
   mounted() {
    this.chuqi(this.rowData.ptId);
  },
  methods: {
    closePart() {
      this.visibleAdd = false;
    },
    savePart(obj) {
      this.part.partCode = obj[0].partNo;
      this.part.partName = obj[0].partName;
      this.formList.find(x => x.fieldName == 'partName').initialValue = obj[0].partName;
      this.visibleAdd = false;
    },
    showDrawer() {
      this.visibleAdd = true;
    },
    async chuqi(id) {
      this.loading = true;
      // const res = await getPart();
      // if (res.resultCode == 200) {
      //   this.formList.find(x => x.fieldName == 'typeId').initialValue = '';
      //   this.formList.find(x => x.fieldName == 'typeId').itemList = res.data.map(y => ({
      //     text: y.name,
      //     value: y.code
      //   }));
      // }
      let res2 = (await getTjdetail({'ptId': id})).data;
      for (let i in res2) {
        this.formList.map(x => {
          if (x.fieldName == i) {
            x.initialValue = res2[i];
          }
        });
      }

      this.modelName = res2.modelName;
      this.ptStatus = res2.ptStatus;
      this.ownerCode = res2.ownerCode;
      this.appId = res2.appId;
      this.ownerParCode = res2.ownerParCode;
      this.isDeleted = res2.isDeleted;
      this.createdBy = res2.createdBy;
      this.createdAt = res2.createdAt;
      this.partCode = res2.partCode;
      this.partName = res2.partName;
      console.log(res2, 'res');
      this.loading = false;
    },

    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    save(obj) {
      this.formList.find(x => x.fieldName == 'vin').initialValue = obj[0].vin;
      this.formList.find(x => x.fieldName == 'modelId').initialValue = obj[0].modelCode;
      this.modelName = obj[0].modelName;
      this.visibleDrawer = false;
    },
    //保存
    chooseOrderNo() {
      this.visibleDrawer = true;
    },
    closeAdd() {
      this.visibleDrawer = false;
    },
    saveAdd() {
      this.visibleAdd = false;
      this.fetchParams = { ...this.fetchParams };
    },
    //保存
    async saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData !== null) {
        console.log(this.saveData);
        //
        this.saveData.ptId = this.rowData.ptId;
        this.saveData.ptStatus = this.ptStatus;
        this.saveData.ownerCode = this.ownerCode;
        this.saveData.ownerParCode = this.ownerParCode;
        this.saveData.modelName = this.modelName;
        this.saveData.appId = this.appId;
        this.saveData.isDeleted = this.isDeleted;
        this.saveData.createdBy = this.createdBy;
        this.saveData.createdAt = this.createdAt;
        this.saveData.partCode = this.part.partCode || this.partCode;
        this.saveData.partName = this.part.partName || this.partName;
        this.loading = true;
        let res = await editSave(this.saveData);
        console.log(res);
        if (res.resultCode === 200) {
          this.$emit('save');
          return this.$notify.success({ title: '提示信息', message: '保存成功' });
        } else {
          this.loading = false;
          // this.$notify.error({ title: '提示信息', message: res.errMsg || '保存失败!' });
          // this.closeDialog();
        }
      }
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    add() {},
    createFormList1() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partName',
          filterable: true,
          placeholder: '请选择配件...',
          readonly: true, // 只读
          rules: [{ required: true, message: '请选择配件...', trigger: 'change' }],
          unitRender: p => {
            return (
              <div>
                <multiuse-button icon="el-icon-search" onClick={() => this.showDrawer()} />
              </div>
            );
          }
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请选择vin...',
          initialValue: '',
          rules: [{ required: true, message: '请选择vin...', trigger: 'change' }],
          unitRender: p => {
            return (
              <div>
                <multiuse-button icon="el-icon-search" onClick={() => this.chooseOrderNo()} />
              </div>
            );
          }
        },
        {
          type: 'INPUT',
          label: '车型',
          fieldName: 'modelId',
          readonly: 'readonly',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '保修期',
          fieldName: 'rpPeriod',
          initialValue: '',
          placeholder: '请输入保修期...',
          rules: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if(!value) {
                  return callback(new Error('请输入保修期...'));
                }
                if(!Number.isInteger(Number(value))) {
                  return callback(new Error('请输入数字值...'));
                }
                if(Number(value)>999) {
                  return callback(new Error('请输入三位数的保修期...'));
                }
                callback();
              },
              trigger: ['blur', 'change'],
            },
          ],
          unitRender: () => {
            return <span>(月)</span>;
          },
        },
        {
          type: 'INPUT',
          label: '保修里程',
          fieldName: 'rpMile',
          initialValue: '',
          placeholder: '请输入保修里程...',
          rules: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if(!value) {
                  return callback(new Error('请输入保修里程...'));
                }
                if(!Number.isInteger(Number(value))) {
                  return callback(new Error('请输入数字值...'));
                }
                if(Number(value)>999999) {
                  return callback(new Error('请输入六位数的保修里程...'));
                }
                callback();
              },
              trigger: ['blur', 'change'],
            },
          ],
          unitRender: () => {
            return <span>(KM)</span>;
          },
        },
        {
          type: 'TEXT_AREA',
          label: '备注',
          initialValue: '',
          fieldName: 'remarks',
          placeholder: '请输入备注...'
        }
      ];
    }
  }
};
</script>

<style lang="less" scoped></style>
